<template>
    <!--权限-->
    <div class="role">
        <a-card>
            <div class="table">
                <Tables
                    ref="table"
                    :columns="columns"
                    :loadData="findRoleList"
                    :addData="addRole"
                    :editData="editRole"
                    :delData="delRole"
                    :formColumns="formColumns"

                >
                    <template slot="id" slot-scope="{text}">
                        <span>{{ text }}</span>
                    </template>
                    <template slot="createTime" slot-scope="{text}">
                        <span>{{ text | moment }}</span>
                    </template>
                </Tables>
            </div>
        </a-card>
    </div>
</template>

<script>
import rules from '@/validate/role'
import { asyncRouterMap } from '@/config/router.config'
import { addRole, findRoleList, delRole, editRole } from '@/api/role'
import { TreeSelect } from 'ant-design-vue'
const SHOW_CHILD = TreeSelect.SHOW_PARENT

export default {
    name: 'RoleList',
    data() {
        return {
            columns: [
                {
                    dataIndex: 'name',
                    title: '角色',
                    align: 'center'
                },
                {
                    dataIndex: 'createTime',
                    title: '创建时间',
                    align: 'center',
                    scopedSlots: { customRender: 'createTime' }
                }
            ],
            formColumns: {
                name: {
                    type: 'input',
                    label: '角色'
                },
                menu: {
                    type: 'treeselect',
                    label: '权限',
                    options: [],
                    optionsLabel: {
                        name: 'title',
                        value: 'value'
                    }
                },
                id: {
                    type: 'hidden'
                }
            },
            visible: false,
            delVisible: false,
            edit: false,
            title: '新增',
            rules: rules,
            form: {
                role_name: '',
                role_menu: []
            },
            checkOptions: [],
            routes: [],
            SHOW_CHILD,
            findRoleList,
            addRole,
            editRole,
            delRole
        }
    },
    created() {
        const [route] = asyncRouterMap
        const { children } = route
        this.routes = []
        const result = this.generateRoutes(children)
        this.routes = result
        this.$set(this.formColumns.menu, 'options', this.routes)
    },
    methods: {
        generateRoutes(routes) {
            const result = routes
                .map(items => {
                    const [value] = items.meta.permission
                    const temp = {
                        title: items.meta.title,
                        value: value,
                        key: value
                    }
                    if (items.children) {
                        temp.children = this.generateRoutes(items.children)
                    }
                    return temp
                })
                .filter(items => !items.hidden)
            return result
        }
    }
}
</script>

<style scoped></style>
